<!--
 * @Author: Tao
 * @Date: 2021-10-22 14:17:00
 * @LastEditors: Tao
 * @LastEditTime: 2021-10-24 00:36:31
 * @Description: 
-->
<template>
  <div class="certification">
    <!-- 表格区域 -->
    <el-table :data="certificationData.list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="userId" label="申请人编号"></el-table-column>
      <el-table-column prop="realname" label="姓名"></el-table-column>
      <el-table-column  label="申请时间">
        <template v-slot="scope">
          {{ scope.row.applyTime | fmtDateTime}}
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
      <el-table-column  label="身份正面">
        <template v-slot="scope">
          <el-popover placement="right"  trigger="hover">
            <img :src="scope.row.idcardPhotoPositive" height="150px" alt="">
            <img slot="reference" :src="scope.row.idcardPhotoPositive" height="50px" alt="">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="身份反面">
        <template v-slot="scope">
          <el-popover placement="right"  trigger="hover">
            <img :src="scope.row.idcardPhotoNegative" height="150px" alt="">
            <img slot="reference" :src="scope.row.idcardPhotoNegative" height="50px" alt="">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
      <el-table-column label="银行卡">
        <template v-slot="scope">
          <el-popover placement="right"  trigger="hover">
            <img :src="scope.row.bankCardPhoto" height="150px" alt="">
            <img slot="reference" :src="scope.row.bankCardPhoto" height="50px" alt="">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column  label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '通过'" type="success " size="mini">{{ scope.row.status}}</el-tag>
          <el-tag v-else type="danger" size="mini">{{ scope.row.status}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="certificationData.page"
      :page-sizes="[8, 10, 15, 20]"
      :page-size="certificationData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="certificationData.total">
    </el-pagination>
  </div>
</template>
<script>
import request from "@/utils/request"
export default {
  data(){
    return{
      certificationData:[],
      queryParams:{
        page:1,
        pageSize: 10
      }
    }
  },
  methods:{
    // 分页查询
    findAllCertification(){
      request.get('/certification/pageQueryCertificationApply',{
        params: this.queryParams,
      }).then( res => {
        // console.log(res);
        this.certificationData = res.data;
      })
    },
    handleSizeChange(size){
      this.queryParams.size = size;
      this.findAllCertification();
    },
    handleCurrentChange(pageSize){
      this.queryParams.pageSize = pageSize;
      this.findAllCertification();
    }
  },
  created(){
    this.findAllCertification();
  }
}
</script>
